<template>
  <div class="home">
    <div class="head">
      <img src="/img/logo.jpg" alt="" />
      <div class="head_1">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1" @click="goHome()">首页</el-menu-item>
          <el-menu-item index="2">我的订单</el-menu-item>
          <el-menu-item index="3" @click="goOut()">退出登录</el-menu-item>
        </el-menu>
      </div>
      <div class="head_2">
        <img src="/img/icon.jpg" alt="" />
        <p>18759587753</p>
      </div>
    </div>
    <div class="content">
      <div class="c1">
        <span>日期</span>
        <span>航班号</span>
        <span>起飞地点/时间</span>
        <span>到达地点/时间</span>
        <span>耗时</span>
        <span>价格</span>
        <span>机票状态</span>
        <span>操作</span>
      </div>
      <div class="c2" v-if="OrderArray.length">
        <ul>
          <li class="c2_li" v-for="(item, index) in OrderArray" :key="index">
            <div>
              <p style="color: #777; font-size: 15px">{{ item.date }}</p>
            </div>
            <div>
              <p style="color: #777; font-size: 15px">{{ item.flight }}</p>
            </div>
            <div>
              <p style="color: #333; font-size: 30px">
                <strong>{{ item.atime }}</strong>
              </p>
              <p style="color: #777; font-size: 15px">
                {{ item.aplace }}<span>T2</span>
              </p>
            </div>
            <div>
              <p style="color: #333; font-size: 30px">
                <strong>{{ item.btime }}</strong>
              </p>
              <p style="color: #777; font-size: 15px">{{ item.bplace }}</p>
            </div>
            <div>
              <p style="color: #777; font-size: 15px">{{ item.elapsedTime }}</p>
            </div>
            <div>
              <p style="color: red; font-size: 25px">¥{{ item.price }}</p>
            </div>
            <div>
              <span :class="statusStyle[item.status]">{{
                getstatus(item.status)
              }}</span>
            </div>
            <div :class="optStyle[item.status]">
              <el-button type="primary" class="option1" @click="changeStatus(item.autoId,'5')">退款</el-button>
              <el-button type="success" class="option2" @click="changeStatus(item.autoId,'1')">付尾款</el-button>
              <el-button type="warning" class="option3" @click="changeStatus(item.autoId,'2')">取票</el-button>
            </div>
          </li>
        </ul>
      </div>
      <div v-else style="margin-top: 20px">当前暂无订单</div>
    </div>
  </div>
</template>
<script>
import http from "@/common/api/request.js";
import { mapState } from "vuex";
export default {
  name: "Order",
  components: {},
  data() {
    return {
      activeIndex: "2",
      OrderArray: [],
      orderStatus: "",
      orderOption: "",
      statusStyle: ["", "active1", "active2", "active3", "active4", "active5"],
      optStyle: ["opt0", "opt1", "opt2", "opt3", "opt4", "opt5"],
    };
  },
  mounted() {
    this.getOrder();
  },
  computed: {
    ...mapState({
      tel: (state) => state.tel,
    }),
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    async getOrder() {
      let tel = this.tel;
      console.log("tel:" + tel);
      let res = await http.$axios({
        url: "/api/selectOrder",
        params: {
          tel,
        },
      });
      this.OrderArray = res;
    },
    getstatus(status) {
      let os = "";
      switch (status) {
        case "0":
          os = "出票中";
          break;
        case "1":
          os = "已出票";
          break;
        case "2":
          os = "已取票";
          break;
        case "3":
          os = "已取消";
          break;
        case "4":
          os = "已过期";
          break;
        case "5":
          os = "已退款";
          break;
      }
      return os;
    },
    goHome() {
      this.$router.push({
        name: "Home",
      });
    },
    goOut(){
      this.$router.push({
                name:'Login',
            });
    },
    changeStatus(orderId,newStatus){
      console.log(orderId+"->"+newStatus);
      http
        .$axios({
          url: "/api/updateStatus",
          method: "post",
          data: {
            orderId,newStatus
          },
        })
        .then((res) => {
          console.log(res.success);
          this.getOrder();
          //if (!res.success) return;
          //this.$router.push("/path");
        });
    }
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 41.0625rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 4.375rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  .head_1 {
    margin-top: 0.625rem;
  }
  .head_2 {
    margin-top: 0.625rem;
    p {
      color: RGB(150, 150, 150);
    }
  }
}
.content {
  width: 100%;
  flex: 1;
  background-color: RGB(237, 241, 246);
  .c1 {
    width: 84%;
    margin: 0 auto;
    margin-top: 1.2rem;
    height: 2.5rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    span {
      width: 14.2%;
      line-height: 2.5rem;
    }
  }
  .c2 {
    width: 84%;
    margin: 0 auto;
    margin-top: 0.4rem;
    background-color: #fff;
    .c2_li {
      padding: 1.25rem 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px #dcdfe6 solid;
      div {
        width: 14.2%;
      }
      .opt {
        display: flex;
        ::v-deep .el-button {
          padding: 5px 5px;
        }
      }
    }
  }
}
.active1 {
  color: #80deea;
}
.active2 {
  color: #66bb6a;
}
.active3 {
  color: #7e57c2;
}
.active4 {
  color: #ffa726;
}
.active5 {
  color: #78909c;
}
.opt0{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option3{
    display: none;
  }
}
.opt1{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option2{
    display: none;
  }
}
.opt2{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option1{
    display: none;
  }
  .option2{
    display: none;
  }
  .option3{
    display: none;
  }
}
.opt3{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option2{
    display: none;
  }
  .option3{
    display: none;
  }
}
.opt4{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option2{
    display: none;
  }
  .option3{
    display: none;
  }
}
.opt5{
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    padding: 7px 7px;
  }
  .option1{
    display: none;
  }
  .option2{
    display: none;
  }
  .option3{
    display: none;
  }
}
</style>
